<template>
    <div class="dialogBox">
        <el-dialog :title="dialogTitle" :visible.sync="appendDialog" :before-close="cencelSend" width="50%" center>
            <el-form ref="AddYCLData" :rules="rules" :model="AddYCLData" label-width="115px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工艺属性:" prop="poolType">
                            <el-select @change="SelectprocessAttr" v-model="AddYCLData.poolType" placeholder="请选择">
                                <el-option v-for="item in AttrOptions" :key="item.label" :label="item.label"
                                    :value="item.label">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务名称:" prop="taskName">
                            <el-input v-model="AddYCLData.taskName" placeholder="请输入任务名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机器人名称:" prop="robotName">
                            <el-select @change="robotNameChange" v-model="AddYCLData.robotName" placeholder="请选择">
                                <el-option v-for="item in RobotOptions" :key="item.id" :label="item.robotName"
                                    :value="item.robotName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="池体编号:" prop="poorNo">
                            <el-select @change="PoorNoChange" v-model="AddYCLData.poorNo" multiple placeholder="请选择">
                                <el-option v-for="item in PoorNoOptions" :key="item.value" :label="item.label"
                                    :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="检测时刻:" prop="execution_time">
                            <el-select v-model="AddYCLData.execution_time" placeholder="请选择">
                                <el-option v-for="item in ZQoptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button class="btn1" @click="cencelSend">取 消</el-button>
                <el-button class="btn2" @click="addYCL('AddYCLData')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {  GetAttrData, GetPoorNoData, AddChkTask, getRobotInfo } from '@/api/cyRobot/quest'
export default {
    props: ['dialogTitle', 'appendDialogVisible', 'formData',],
    name: 'AddAndEdit',
    data() {
        return {
            types: '0',
            //检测周期
            //value: '',
            ZQoptions: [
                {
                    value: '01',
                    label: '01'
                },
                {
                    value: '02',
                    label: '02'
                },
                {
                    value: '03',
                    label: '03'
                },
                {
                    value: '04',
                    label: '04'
                },
                {
                    value: '05',
                    label: '05'
                },
                {
                    value: '06',
                    label: '06'
                },
                {
                    value: '07',
                    label: '07'
                },
                {
                    value: '08',
                    label: '08'
                },
                {
                    value: '09',
                    label: '09'
                },
                {
                    value: '10',
                    label: '10'
                },
                {
                    value: '11',
                    label: '11'
                },
                {
                    value: '12',
                    label: '12'
                },
                {
                    value: '13',
                    label: '13'
                },
                {
                    value: '14',
                    label: '14'
                },
                {
                    value: '15',
                    label: '15'
                },
                {
                    value: '16',
                    label: '16'
                },
                {
                    value: '17',
                    label: '17'
                },
                {
                    value: '18',
                    label: '18'
                },
                {
                    value: '19',
                    label: '19'
                },
                {
                    value: '20',
                    label: '20'
                },
                {
                    value: '21',
                    label: '21'
                },
                {
                    value: '22',
                    label: '22'
                },
                {
                    value: '23',
                    label: '23'
                }
            ],
            //新增or修改按钮
            appendDialog: false,
            //新增数据初始化
            AddYCLData: {
                poolType: '',
                poorNo: [],
                taskName: "",
                execution_time: '',
                robotName: "",
                robotId: ''
            },
            rules: {
                preName: [
                    { required: true, message: '请输入预处理名称', trigger: 'blur' },
                ],
                taskName: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' },
                ],
                poolType: [
                    { required: true, message: '请选择工艺属性', trigger: 'change' },

                ],
                robotName: [
                    { required: true, message: '请输入机器人名称', trigger: 'blur' },
                ],
                execution_time: [
                    { required: true, message: '请选择检测时刻', trigger: 'change' },
                ],
                poorNo: [
                    { type: 'array', required: true, message: '请选择池体编号', trigger: 'change' },
                ]
            },
            //机器人名称
            robotNames: [],
            RobotOptions: [],
            //工艺属性
            AttrArry: [],
            AttrOptions: [],
            //池体编号
            PoorNoArry: [],
            PoorNoOptions: []
        };
    },
    mounted() {
        this.robotList()  //机器人任务列表
        this.getAttrData()   //工艺属性列表
    },
    methods: {
        //获取工艺属性
        getAttrData() {
            GetAttrData().then(response => {
                this.AttrArry = response.data
                this.AttrOptions = this.AttrArry.map((item, index) => {
                    return { value: index, label: item }
                })
            })
        },
        //获取机器人任务列表
        robotList() {
            getRobotInfo().then(response => {
                this.RobotOptions = response.rows
                this.AddYCLData.robotName = response.rows.map(item => item.robotName)
                this.AddYCLData.robotId = response.rows.map(item => item.id)
            })
        },
        SelectprocessAttr(value) {
            //获取池体编号
            //参数是工艺属性  
            GetPoorNoData({ processAttr: value }).then(response => {
                this.PoorNoArry = response.data
                this.PoorNoOptions = this.PoorNoArry.map((item, index) => {
                    return { value: index, label: item }
                })
            })
        },
        PoorNoChange(value) {
            this.AddYCLData.poolNo = String([value])
        },
        robotNameChange(value) {
           const selectedItem = this.RobotOptions.find(item => item.robotName == value)
           if(selectedItem){
              this.AddYCLData.robotId = selectedItem.id
           }else{
              this.$message({
                type: 'error',
                message: '请选择正确的机器人名称!'
            });
           }
        },
        // 取消  
        cencelSend(ruleForm) {
            this.$refs.AddYCLData.resetFields(); // 清除表单数据
            this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法
        },
        //增加
        addYCL(AddYCLData) {
            // 先进行表单校验
            this.$refs[AddYCLData].validate((valid) => {
                //校验通过在新增
                if (valid) {
                    AddChkTask(this.AddYCLData).then(response => {
                        if (response.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            });

                            this.$emit('updataList',)//触发父组件里的更新数据方法
                            this.$emit('cencelSend',)//触发父组件的子组件上绑定的cencelSend方法

                        }
                        this.$refs.AddYCLData.resetFields(); // 清除表单数据
                    })

                } else {
                    return false;
                }
            });

        },
    },
    watch: {
        //监听父组传过来的type formData (computedType为了同时监听两个值做了计算)
        formData(newValue, oldValue) {
            this.AddYCLData = {
                poolType: '',
                poorNo: [],
                taskName: "",
                execution_time: '',
                robotName: "",
                robotId: ''
            }
        },
        //监听父组件传过来的表单数据
        appendDialogVisible(newValue, oldValue) {
            this.appendDialog = newValue
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 12vh !important;
}

.dialogBox {
    ::v-deep .el-dialog__header {
        background-color: #123150;
        color: #ffff;
    }

    ::v-deep .el-dialog__title {
        color: #ffff;
    }

    ::v-deep .el-dialog__body {
        background-color: #123150;
    }

    ::v-deep .el-dialog__footer {
        background-color: #123150;
    }

    ::v-deep .el-input__inner {
        background-color: #123150;
        color: #EDEDED;
    }

    ::v-deep .el-form-item__label {
        color: #EDEDED;
    }

    ::v-deep .el-form-item__label {
        width: 111px !important;
    }

    ::v-deep .el-input__inner {
        margin-bottom: 18px;
    }

    ::v-deep .el-input__inner {
        border-color: #1560AC;
    }

    ::v-deep .el-select>.el-input {
        width: 100%;
    }

    ::v-deep .el-select {
        width: 100%;
    }

    ::v-deep.el-input__suffix {
        top: -8px;
    }

    ::v-deep .el-select__tags {
        top: 35%;
    }

    .dialog-footer {
        display: flex;
        justify-content: center;

        .btn1 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #F0F0F0;
            border-radius: 5px;
            margin-right: 10%;
        }

        .btn2 {
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #F0F0F0;
            border-radius: 5px;
        }

        ::v-deep .el-button--default {
            background-color: #123150;
        }

        ::v-deep .el-button--default:hover {
            background-color: #F0F0F0;
        }

        ::v-deep .el-button--default {
            color: #E1E2E5;
        }

        ::v-deep .el-button--default:hover {
            color: #142150;
        }
    }

    ::v-deep .el-input__icon {
        height: 74% !important;
    }
}
</style>